<section id="cEnd-create" class="ml-24 mr-24">
  <div class="fileButton"></div>
  <div class="picButton"></div>
  <h4 class="line-height-56 font-16 border-b" style="margin: 0px;">编辑资讯</h4>
  <div class="mt-10 dy-flex">
    <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>标题:</div>
    <div class="dy-fx-8">
      <input type="text" class="form-control" style="width: 520px;" v-model="articleTitle" />
    </div>
  </div>
  <div class="dy-flex mt-10">
    <div class="dy-fx-1 line-height-34">
      <span style="color:#fff;">*</span><span>列表图:</span>
    </div>
    <div class="dy-fx-8">
      <div class="picbox" v-if="listImg">
        <img :src="listImg" class="picture">
        <span class="resetup cursor" @click="picUp">重新上传</span>
      </div>
      <button type="button" class="btn s-btn-default" v-if="!listImg" @click="picUp">添加图片</button>
    </div>
  </div>
  <div class="mt-10 dy-flex">
    <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>内容详情:</div>
    <div class="dy-fx-8">
      <div id="editor" style="width: 854px;"></div>
    </div>
  </div>
  <div class="mt-10 dy-flex">
    <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>附件上传:</div>
    <div class="dy-fx-8">
      <ul>
        <li v-for="(item, index) in files" class="relative">
          <a :href="item.url" :download="item.name" class="color-999 line-height-34">
            <span class="mr-5" :class="{'icon-file': item.type == 'file', 'icon-picture': item.type == 'pic'}"></span>
            {{item.name}}
          </a>
          <span class="icon-Gm-close absolute color-999 cursor font-12 line-height-34" style="right:0;top:0;" @click="delFile(index)"></span>
        </li>
      </ul>
      <button type="button" class="btn s-btn-default" @click="fileUp">上传文件</button>
    </div>
  </div>
  <div class="mt-10 dy-flex">
    <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>备注:</div>
    <div class="dy-fx-8">
      <textarea class="form-control color-666" rows="5" style="width: 520px;" v-model="memo"></textarea>
    </div>
  </div>
  <div class="mt-10 dy-flex">
    <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>状态:</div>
    <div class="dy-fx-8">
      <div class="select-ul" style="width:150px;">
        <span class="select-name br-4 box-i-shadow" ref="statusjwk">请选择</span>
        <ul>
          <li v-for="item in stateList" @click="eventStatus(item.dictCode)">{{item.dictName}}</li>
        </ul>
      </div>
    </div>
  </div>
	<!-- //本次 -->
	<div class="mt-10 dy-flex">
	  <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>可参与性:</div>
	  <div class="dy-fx-8">
	    <ul class="cr-type-select clearfix">
				<li :class="{active: item.code == participateAt}" v-for="item in participateLt" @click="participateSel(item)">{{item.name}}</li>
			</ul>
	  </div>
	</div>
	<div v-if="participateAt == 'Y'">
		<div class="mt-10 dy-flex">
		  <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>参与时间:</div>
		  <div class="dy-fx-8">
		    <web-calendar v-model="dateTime.begin" tips="请选择日期" style="width: 120px;display: inline-block;vertical-align: middle;"></web-calendar>
				<span class="line-height-34 inline" style="vertical-align: middle;">-</span>
				<web-calendar v-model="dateTime.end" tips="请选择日期" style="width: 120px;display: inline-block;vertical-align: middle;"></web-calendar>
				<span class="js-set color-999" :class="{'js-q-active': dateTime.isDefalut}" @click="longTrem" style="margin-left: 28px;">长期</span>
		  </div>
		</div>
		<div class="mt-10 dy-flex">
		  <div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>自定义参与:</div>
		  <div class="dy-fx-8">
		    <input type="text" class="form-control" placeholder="自定义按钮名称，默认“参与”（非必填）" style="width: 310px;" v-model="buttonName">
		  </div>
		</div>

		<div class="color-primary mt-15 cursor" @click="showTemplate">
			<span :class="isShowTemplate?'icon-Gm-delete':'icon-Org-account' "></span>
			<span>{{isShowTemplate?'隐藏':'展示'}}提交模版</span>
		</div>
		<div class="border mt-5 br-4" v-if="isShowTemplate">
			<div class="dy-flex text-center line-height-40" style="background:rgba(240,242,255,1);height: 40px;color: #A5AAB7;">
				<div class="dy-fx-2">自定义名称</div>
				<div class="dy-fx-1">类型</div>
				<div class="dy-fx-2">取值范围</div>
				<div class="dy-fx-2">是否必填</div>
			</div>
			<div class="dy-flex text-center line-height-40 color-666 module-tows" @click="moudleIndex = index" :class="{'module-active': index == moudleIndex}" style="height: 40px;" v-for="(item, index) in moduleLt">
				<div class="dy-fx-2">
					<span class="mr-5" v-if="!item.flag0">{{ item.name }}</span>
					<input type="text" class="form-control inline-block text-center" style="width: 60%;" v-model="item.name" v-if="item.flag0">
					<span class="icon-Gm-edit" v-if="!item.flag0" @click="queryName(index)"></span>
					<span class="icon-Gm-confirm ml-5" v-if="item.flag0" @click="queryName(index)"></span>
					<span class="icon-Gm-cancel ml-5" v-if="item.flag0" @click="queryName(index, 'cancel')"></span>
				</div>
				<div class="dy-fx-1">
					<div class="select-ul" style="width:100px;">
					  <span class="select-name br-4 box-i-shadow cursor" style="text-indent: 0;">{{item.type_name}}</span>
					  <ul>
					    <li v-for="item in fieldLt"  @click="typeSel(item, index)">{{item.dictName}}</li>
					  </ul>
					</div>
				</div>
				<div class="dy-fx-2">
					<span class="mr-5" v-if="!item.flag1">{{ item.range }}</span>
					<input type="text" class="form-control inline-block text-center" :placeholder="item.placeholder" style="width: 60%;" v-model="item.range" v-if="item.flag1">
					<span class="icon-Gm-edit" v-if="!item.flag1" @click="queryRange(index)"></span>
					<span class="icon-Gm-confirm ml-5" v-if="item.flag1" @click="queryRange(index)"></span>
					<span class="icon-Gm-cancel ml-5" v-if="item.flag1" @click="queryRange(index, 'cancel')"></span>
				</div>
				<div class="dy-fx-2">
					<div class="select-ul" style="width:100px;">
					  <span class="select-name br-4 box-i-shadow cursor" style="text-indent: 0;">是</span>
					  <ul>
					    <li v-for="item in isValidateLt" @click="isValidateSel(item, index)">{{item.name}}</li>
					  </ul>
					</div>
				</div>
			</div>
		</div>
		<div class="mt-15" v-if="isShowTemplate">
			<button type="button" class="btn s-btn-default mr-10" @click="addMoudle">添加一行</button>
			<button type="button" class="btn s-btn-default" @click="delOneModule">删除</button>
		</div>
	</div>

  <div class="border-t mt-15 pt-10 pb-10">
    <button class="n-btn-primary br-4 mr-10" @click="saveSubmit">保存</button>
    <button class="n-btn-outline br-4" @click="previewInfo">预览</button>
  </div>
  <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
</section>

<style media="screen">
  .loadprogress{
		position: fixed;
    z-index: 999999;
		left: 0;
		bottom: 0;
		height: 20px;
		width: 500px;
		font-size: 12px;
		text-indent: 3px;
		line-height: 20px;
	}
  .picbox {
    width: 110px;
    height: 110px;
    display: inline-block;
    position: relative;
  }
  .picture {
    width: 100%;
    height: 100%;
  }
  .resetup {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 28px;
    line-height: 28px;
    color: #fff;
    background: rgba(0,0,0,.5);
    text-align: center;
  }
  .hover-show {
    display: none;
  }
  .init-file-hover:hover .hover-show {
    display: block;
  }
	.hl-date-icon {

	}
	.module-tows:nth-child(2n+1) {
		background:rgba(249,249,249,1);
	}
	.module-active {
		background:rgba(240,240,247,1) !important;
	}
</style>

<script src="scripts/libs/wangEditor.min.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/news_edit.js" charset="utf-8"></script>
